<template>
  <el-dialog
      title="配置源信息"
      :visible.sync="visible"
      width="1000px"
      center
      v-el-drag-dialog>

    <div class="form-box-group">
      <div class="form-box-item" v-for="(runform,index) in lists" :key="index">
        <el-form
            :model="runform"
            ref="runform"
            size="small"
            label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="组件名称" prop="zname">
                <el-input v-model="runform.zname" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="函数名称" prop="funName">
                <el-input v-model="runform.funName" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="数据源类型" prop="type">
                <el-select v-model="runform.type" @change="runformTypeChange(runform)" style="width: 100%;">
                  <el-option label="设置值" :value="0"></el-option>
                  <el-option label="消息队列" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设置名称" prop="dname" v-if="runform.type===1">
                <el-input v-model="runform.dname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="runform.type===1">
              <el-form-item label="队列类型" prop="queue">
                <el-select v-model="runform.queue" style="width: 100%;">
                  <el-option label="ZeroMQ" :value="0"></el-option>
                  <el-option label="RabbitMQ" :value="1"></el-option>
                  <el-option label="RocketMQ" :value="2"></el-option>
                  <el-option label="ActiveMQ" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="runform.type===1">
              <el-form-item label="响应模式" prop="subscribe">
                <el-select v-model="runform.subscribe" style="width: 100%;">
                  <el-option label="发布订阅" :value="0"></el-option>
                  <el-option label="请求响应" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8" v-if="runform.queue===1 || runform.queue===2">
              <el-form-item label="主机名称" prop="hostName">
                <el-input v-model="runform.hostName" placeholder="主机名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="runform.queue===1 || runform.queue===2">
              <el-form-item label="用户名称" prop="userName">
                <el-input v-model="runform.userName" placeholder="用户名称"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8" v-if="runform.queue===1 || runform.queue===2">
              <el-form-item label="主机密码" prop="passWord">
                <el-input v-model="runform.passWord" placeholder="主机密码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="runform.type===1 ">
              <el-form-item label="IP地址" prop="ip">
                <el-input v-model="runform.ip"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="runform.type===1 ">
              <el-form-item label="端口" prop="port" class="port">
                <el-input v-model="runform.port" placeholder="端口"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="runform.subscribe===1">
              <el-form-item label="响应内容" prop="responsevule">
                <el-input v-model="runform.responsevule" placeholder="响应内容"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24" v-if="runform.type===0">
              <el-form-item label="函数" prop="subid">
                <el-table
                    class="yt-table"
                    :data="runform.runformTableList"
                    border
                    style="width: 100%">
                  <el-table-column prop="" label="" width="40px" align="center">
                    <template slot-scope="scope">
                      <el-radio
                          :label="scope.row.id"
                          v-model="runform.subid"></el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column prop="pname" label="组件名称" min-width="100px"></el-table-column>
                  <el-table-column prop="pfName" label="函数名称" min-width="100px"></el-table-column>
                  <el-table-column prop="paramName" label="参数名称" min-width="100px"></el-table-column>
                  <el-table-column prop="avalue" label="参数值" min-width="120px" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="addTimeStr" label="新增时间" min-width="100px"></el-table-column>
                </el-table>
              </el-form-item>
            </el-col>

            <el-col :span="24" v-if="runform.type===1">
              <el-form-item label="备注" prop="remarks">
                <el-input type="textarea" v-model="runform.remarks" placeholder="备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>


    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="visible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Dialog from "@/components/Dialog/Dialog.vue";
import {post_appliesRun} from "@/apis/appLC/applc";

export default {
  props: {},
  components: {Dialog},
  data() {
    return {
      visible: false,
      lists: []
    };
  },
  computed: {},
  mounted() {

  },
  created() {

  },
  methods: {
    show(data) {
      this.visible = true
      this.lists = data.map(item => {
        return {
          ...item,
          appid: item.appId,
          relationLineSource: item.relationLineSource,
          funName: item.sourceFuntion.functionName,
          zname: item.sourcePluginsName,
          runformTableList: [],
          type: '',
          queue: '',
          subscribe: '',
          ip: '',
          port: '',
          responsevule: '',
          hostName: '',
          userName: '',
          passWord: '',
          subid: '',
          dname: ''
        }
      })
    },
    runformTypeChange(runform) {
      runform.queue = ''
      runform.subscribe = ''
      runform.ip = ''
      runform.port = ''

      if (runform.type === 0) {
        this.$api.getAppDataByAppId({appId: runform.appid, pfId: runform.sourceFuntion.id}).then(res => {
          if (res.data.code === 0) {
            runform.runformTableList = res.data.data.map(item => {
              return {
                ...item,
                addTimeStr: this.$moment(item.addTime).format('YYYY-MM-DD'),
                editTimeStr: item.editTime ? this.$moment(item.editTime).format('YYYY-MM-DD') : '--'
              }
            })
          }
        })
      }else if(runform.type === 1){
        this.$api.getAppAqueueByAppId({appId: runform.appid, pfId: runform.sourceFuntion.id}).then(res => {
          if (res.data.code === 0) {
            if(res.data.data){
              runform.dname = res.data.data.name
              runform.queue =  res.data.data.type
              runform.subscribe = res.data.data.subscribe
              runform.hostName = res.data.data.hostName
              runform.ip = res.data.data.ip
              runform.port = res.data.data.port
              runform.responsevule = res.data.data.responsevule
              runform.remarks = res.data.data.remarks
            }
          }
        })
      }
    },
    save() {
      let obj = {
        aqueue: [],
        adata: []
      }
      this.lists.forEach(item => {
        if (item.type === 1) {
          obj.aqueue.push({
            appId: item.appid,
            dataSource: item.type,
            type: item.queue,
            name: item.dname,
            subscribe: item.subscribe,
            hostName: item.hostName,
            userName: item.userName,
            passWord: item.passWord,
            ip: item.ip,
            port: item.port,
            pfId: item.relationLineSource,
            remarks: item.remarks,
            responsevule: item.responsevule
          })
        } else {
          if(item.subid){
            obj.adata.push({
              id: item.subid
            })
          }
        }
      })

      this.$api.addAppliseSourceFunctionConfig(obj).then(res => {
        if(res.data.code===0){
          this.$message.success(res.data.msg)
          this.$router.push({name:'applist'})
        }
      })
    }
  },
};
</script>
<style lang="less" scoped>
  .form-box-group {
    max-height: 500px;
    overflow: hidden;
    overflow-y: auto;
  }

  .form-box-item {
    padding: 15px 50px 15px 15px;
    border-bottom: solid 1px #ffffff;

    &:last-child {
      border-bottom: none;
    }
  }
</style>